<%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" %>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="page" %>
<page:page>
    <%--分页--%>
    <script src="${pageContext.request.contextPath}/js/page.js"></script>


    <style>
        th,td{
            text-align:center;
        }
    </style>

    <div class="row">
        <div class="col-lg-12">
            <%--<div class="panel panel-default">--%>
                <%--<div class="panel-heading">--%>
                    <%--<span><i class="fa fa-calendar red"></i><strong>调拨记录</strong></span>--%>
                <%--</div>--%>

                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-12 col-md-12 col-lg-12 page-header">
                            <div class="col-xs-3 col-md-3 col-lg-3">
                                <div class="form-group">
                                    <span for="platformCode">平台</span>
                                    <span>
                                        <select class="form-control" name='platformCode' id='platformCode' onchange="queryBut()">
                                        </select>
                                    </span>
                                </div>
                            </div>
                            <%--<div class="col-md-2" style="padding-top: 20px;">--%>
                                <%--<div class="form-group">--%>
                                    <%--<button type="button" class="btn btn-danger" data-action="expand-all"  onclick="queryBut()" ><i class="fa fa-search"></i>&nbsp;查询</button>--%>
                                <%--</div>--%>
                            <%--</div>--%>

                            <%--<div class="col-xs-7 col-md-7 col-lg-7">--%>
                                <div class="col-xs-3 col-md-3 col-lg-3">
                                    <div class="form-group">
                                        <span for="startdate">开始时间(可选）</span>
                                        <span><input type="date" class="form-control" name="startdate" id="startdate"/></span>
                                    </div>
                                </div>
                                <div class="col-xs-3 col-md-3 col-lg-3">
                                    <div class="form-group">
                                        <span for="enddate">结束时间(可选）</span>
                                        <span><input type="date" class="form-control" name="enddate" id="enddate"/></span>
                                    </div>
                                </div>
                                <div class="col-xs-1 col-md-1 col-lg-1" style="padding-top: 20px;">
                                    <div class="form-group">
                                        <button type="button" class="btn btn-outline btn-primary btn-sm" onclick="queryBut()">
                                            <i class="fa fa-search"></i>&nbsp;查询
                                        </button>
                                    </div>
                                </div>
                            <%--</div>--%>
                        </div>


                        <div class="col-xs-12 col-md-12 col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    <div class="dataTable_wrapper">
                                        <table class="table table-bordered table-hover" id="dataTables-example">
                                            <thead>
                                            <tr>
                                                <th class="center" style="width:20%;">批次号</th>
                                                <th class="center" style="width:13%;">成功/失败/总车辆数</th>
                                                <th class="center" style="width:13%;">目标平台</th>
                                                <th class="center" style="width:13%;">操作人</th>
                                                <th class="center" style="width:20%;">时间</th>
                                            </tr>
                                            </thead>
                                            <tbody id="tbody">
                                            </tbody>
                                        </table>
                                        <!-- /.table-responsive -->
                                        <div class="col-xs-12 col-md-12 col-lg-12" >
                                            <div style="float: right;padding-top: 22px;padding-left:10px;" class="dataTables_length">
                                                <select name="dataTables-example_length" onchange="pageCount()"
                                                        id="dataTables-example_length" aria-controls="dataTables-example"
                                                        class="form-control input-sm">
                                                    <option value="10">每页10行</option>
                                                    <option value="25">每页25行</option>
                                                    <option value="50">每页50行</option>
                                                    <option value="100">每页100行</option>
                                                </select>
                                            </div>
                                            <div style="float: right" class="dataTables_paginate paging_simple_numbers"
                                                id="dataTables-example_paginate">
                                                <ul class="pagination" id="paginationPage">
                                                    <li class="page active" class="paginate_button"
                                                        aria-controls="dataTables-example"
                                                        tabindex="0"><a href="#">1</a></li>
                                                    <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                        tabindex="1"><a href="#">2</a></li>
                                                    <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                        tabindex="2"><a href="#">3</a></li>
                                                    <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                        tabindex="3"><a href="#">4</a></li>
                                                    <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                        tabindex="4"><a href="#">5</a></li>
                                                    <li class="page" class="paginate_button " aria-controls="dataTables-example"
                                                        tabindex="5"><a href="#">6</a></li>
                                                </ul>
                                                <ul class="pagination">
                                                    <li class="paginate_button next" aria-controls="dataTables-example"
                                                        tabindex="0" id="dataTables-example_next"><a href="#" onclick="onPage(this)">Next</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- /.panel-body -->
                            </div>
                        </div><!--/col-->
                    </div>

                </div>
            <%--</div>--%>
        </div>
    </div>
    <!--/row-->

    <script>
        $(function(){
            getGroup();
        });

        function queryBut(){
            queryList($('.active').attr("tabindex"),$("#dataTables-example_length").val())
        }

        function queryList(page,size) {
            var params = new Object();
            params.platformCode = $("#platformCode").val();
            params.size = size;
            params.page = page;
            params.startime = $("#startdate").val();
            params.endtime = $("#enddate").val();


            $.ajax({
                url: '${pageContext.request.contextPath}/v1/machines/sn/allocate/records',
                type: 'POST',
                datatype: 'json',
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                data: JSON.stringify(params),
                cache: false,
                success: function (data, textStatus, jqXHR) {
                    $("#tbody").empty();
                    var failNum = 0;
                    $(data.data).each(function () {
                        failNum = parseInt(this.num)-parseInt(this.successNum);
                        $("#tbody").append('<tr class="odd gradeX" id=' + this.allocateBatId + ' item= ' + JSON.stringify(this) + '>' +
                            '<td class="center"><a  href="javascript:shenduiyou(\''+this.allocateBatId+'\');">'+this.allocateBatId+'</a></td>' +
                            '<td class="center">' + this.successNum + '/' + failNum +'/'+this.num +'</td> ' +
                            '<td class="center">' + this.platformName + '</td>' +
                            '<td class="center">' + this.userName + '</td>' +
                            '<td class="center">' + this.dotime + '</td>' +
//                            '<td class="center"><a class = "fa fa-search" style="margin-left:15px;" href="javascript:shenduiyou(\''+this.allocateBatId+'\');">详情</a></td>' +
                            '</tr>').data("item", this);
                        $("#" + this.allocateBatId).attr("item", JSON.stringify(this));//直接写item属性,json串里的空格会把this分成不完整的json串,所以改为直接set值
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    return;
                }
            });
        }

        function getGroup() {
            $.ajax({
                url: '${pageContext.request.contextPath}/v1/actors/groups/maps?type=0',
                type: 'GET',
                datatype: 'json',
                contentType: 'application/json;charset=utf-8',
                Accept: 'application/json',
                cache: false,
                success: function (data, textStatus, jqXHR) {
                    $("#platformCode").empty();
                    $("#platformCode").append('<option value="" selected>全部</option>');
                    $(data.data).each(function () {
                        $("#platformCode").append('<option value="'+this.platformCode+'">'+this.groupName+'</option>').data("item", this);
                    });
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    return;
                }
            });
        }

        function shenduiyou(allocateBatId){
            window.open('/linkboard/app/allocateDetails.html?allocateBatId='+allocateBatId,"window","width=800px,height=600px, modal=yes,status=no");
        }
    </script>
</page:page>